<template>
  <div
    :class="['m-notification-wrap', placement]"
    :style="`top: ${placement.includes('top') ? top : ''}px; bottom: ${
      placement.includes('bottom') ? bottom : ''
    }px;`"
  >
    <transition-group name="slide-fade" tag="div">
      <div
        class="m-notification"
        @mouseenter="onEnter(index)"
        @mouseleave="onLeave(index)"
        v-show="!hideIndex.includes(index)"
        v-for="(data, index) in notificationData"
        @click="onLink(data, index)"
        :key="`n${index}`"
        style="cursor: pointer; padding-bottom: 27px"
      >
        <div
          :class="['u-title', { mb4: mode !== 'open', ml48: mode !== 'open' }]"
        >
          {{ data.title || "--" }}
        </div>
        <div :class="['u-description', { ml48: mode !== 'open' }]">
          {{ data.description || "--" }}
        </div>
        <div :class="['u-description flex', { ml48: mode !== 'open' }]">
          <span> <i class="el-icon-time"></i> {{ data.time || "--" }}</span>
          <!--level 1红icon2黄icon3空黄icon -->
          <div class="level" style="color: #cb343a" v-if="data.level == '1'">
            一级告警
          </div>
          <div class="level" style="color: #e99d42" v-if="data.level == '2'">
            二级告警
          </div>
          <div class="level" style="color: #aaaaaa" v-if="data.level == '3'">
            三级告警
          </div>
          <!-- <img :src="imgArr['first']" alt="" v-if="data.level == '1'" />
          <img :src="imgArr['second']" alt="" v-if="data.level == '2'" />
          <img :src="imgArr['third']" alt="" v-if="data.level == '3'" /> -->
        </div>
        <div style="border-top: 1px solid #333">
          <span style="float: right">去处理></span>
        </div>

        <svg
          class="u-close"
          @click="onHideNotification(index)"
          viewBox="64 64 896 896"
          data-icon="close"
          aria-hidden="true"
          focusable="false"
        >
          <path
            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
          ></path>
        </svg>
      </div>
    </transition-group>
  </div>
</template>
<script>
export default {
  name: "Notification",
  props: {
    duration: {
      // 自动关闭的延时时长,单位ms，默认4500ms；设置null时，不自动关闭
      type: Number,
      default: 4500,
    },
    top: {
      // 消息从顶部弹出时，距离顶部的位置，单位像素px
      type: Number,
      default: 24,
    },
    bottom: {
      // 消息从底部弹出时，距离底部的位置，单位像素
      type: Number,
      default: 24,
    },
    placement: {
      // 消息弹出位置，可选topLeft,topRight,bottomLeft,bottomRight
      type: String,
      default: "topRight",
    },
  },
  data() {
    return {
      colorStyle: {
        // 颜色主题对象
        info: "#1890FF",
        success: "#52c41a",
        error: "#f5222d",
        warn: "#faad14",
      },
      imgArr: {
        first: require("@/assets/images/firstlevel.png"),
        second: require("@/assets/images/secondlevel.png"),
        third: require("@/assets/images/thirdlevel.png"),
      },
      mode: "info", // 调用方法对应的样式主题
      resetTimer: null,
      hideIndex: [],
      hideTimers: [],
      notificationData: [],
    };
  },
  computed: {
    clear() {
      // 所有提示是否已经全部变为false
      return this.hideIndex.length === this.notificationData.length;
    },
  },
  watch: {
    clear(to, from) {
      // 所有提示都消失后重置
      if (!from && to) {
        this.resetTimer = setTimeout(() => {
          this.hideIndex.splice(0);
          this.notificationData.splice(0);
        }, 500);
      }
    },
  },
  methods: {
    onEnter(index) {
      clearTimeout(this.hideTimers[index]);
      this.$set(this.hideTimers, index, null);
    },
    onLeave(index) {
      if (this.duration) {
        this.$set(
          this.hideTimers,
          index,
          setTimeout(() => {
            this.onHideNotification(index);
          }, this.duration)
        );
      }
    },
    show(notification) {
      clearTimeout(this.resetTimer);
      this.notificationData.push(notification);
      this.hideTimers.push(null);
      const index = this.notificationData.length - 1;
      if (this.duration) {
        this.$set(
          this.hideTimers,
          index,
          setTimeout(() => {
            this.onHideNotification(index);
          }, this.duration)
        );
      }
    },
    open(notification) {
      this.mode = "open";
      this.show(notification);
    },
    info(notification) {
      this.mode = "info";
      this.show(notification);
    },
    success(notification) {
      this.mode = "success";
      this.show(notification);
    },
    error(notification) {
      this.mode = "error";
      this.show(notification);
    },
    warn(notification) {
      this.mode = "warn";
      this.show(notification);
    },
    onHideNotification(index) {
      this.hideIndex.push(index);
      this.$emit("close");
    },
    onLink(data, index) {
      this.$emit("onLink", data);
      this.onHideNotification(index);
    },
  },
};
</script>
<style lang="scss" scoped>
// 渐变过渡效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
// 滑动渐变过渡效果
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(408px);
  -ms-transform: translateX(408px); /* IE 9 */
  -webkit-transform: translateX(408px); /* Safari and Chrome */
  opacity: 0;
}
.topRight {
  margin-right: 24px;
  right: 0;
}
.topLeft {
  margin-left: 24px;
  left: 0;
}
.bottomRight {
  margin-right: 24px;
  right: 0;
}
.bottomLeft {
  margin-left: 24px;
  left: 0;
}
.m-notification-wrap {
  position: fixed;
  z-index: 999; // 突出显示该层级
  width: 308px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  max-height: calc(100vh - 100px);
  overflow-y: scroll;
  overflow-x: hidden;
  .m-notification {
    margin-bottom: 16px;
    padding: 16px 24px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 15%);
    line-height: 1.5;
    background: #fff;
    transition: all 0.3s;
    position: relative;
    .flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 12px;
        height: 12px;
      }
    }
    .u-status-svg {
      width: 24px;
      height: 24px;
      display: inline-block;
      position: absolute;
      margin-left: 4px;
    }
    .u-title {
      padding-right: 24px;
      display: inline-block;
      color: rgba(0, 0, 0, 0.85);
      font-size: 18px;
    }
    .u-description {
      font-size: 14px;
      padding: 5px 0;
    }
    .mb4 {
      margin-bottom: 4px;
    }
    .ml48 {
      margin-left: 48px;
    }
    .u-close {
      display: inline-block;
      position: absolute;
      top: 21px;
      right: 24px;
      width: 14px;
      height: 14px;
      fill: rgba(0, 0, 0, 0.45);
      cursor: pointer;
      transition: fill 0.3s ease;
      &:hover {
        fill: rgba(0, 0, 0, 0.75);
      }
    }
  }
}
</style>
